<template>
  <el-form :model="modelValue" ref="formRef" label-position="top" :rules="rules">
    <el-form-item label="企业名称" prop="businessName">
      <el-input placeholder="请输入" v-model="modelValue.businessName"></el-input>
    </el-form-item>
    <el-form-item label="企业简称" prop="businessShortName">
      <el-input placeholder="请输入" v-model="modelValue.businessShortName"></el-input>
    </el-form-item>
    <el-form-item label="社会信用代码" prop="unifiedSocialCreditCode">
      <el-input placeholder="请输入" v-model="modelValue.unifiedSocialCreditCode"></el-input>
    </el-form-item>
    <el-form-item label="经营者名称" prop="operatorName">
      <el-input placeholder="请输入" v-model="modelValue.operatorName"></el-input>
    </el-form-item>
    <el-form-item label="经营者身份证号" prop="idNumber">
      <el-input placeholder="请输入" v-model="modelValue.idNumber"></el-input>
    </el-form-item>
    <el-form-item label="经营者手机号" prop="mobileNumber">
      <el-input placeholder="请输入" v-model="modelValue.mobileNumber"></el-input>
    </el-form-item>
    <el-form-item label="经营者身份证" prop="idCardFrontImage">
      <IdCardUpload v-model:frontUrl="modelValue.idCardFrontImage" v-model:backUrl="modelValue.idCardBackImage" />
    </el-form-item>
    <el-form-item label="身份证开始日期" prop="idCardValidStartDate">
      <el-date-picker style="flex: 1" v-model="modelValue.idCardValidStartDate" value-format="YYYY-MM-DD" placeholder="请选择" />
    </el-form-item>
    <el-form-item label="身份证结束日期" prop="idCardValidEndDate">
      <EndTime v-model="modelValue.idCardValidEndDate" />
    </el-form-item>
    <el-form-item label="营业执照" prop="businessLicenseImage">
      <div class="upload-box">
        <div>
          <el-upload :multiple="false" :show-file-list="false" :http-request="uploadLicense">
            <template #default>
              <div class="upload-ele" v-if="!modelValue.businessLicenseImage">
                <el-icon>
                  <Plus />
                </el-icon>
                点击上传
              </div>
              <div v-else class="upload-img-preview">
                <img :src="modelValue.businessLicenseImage" />
              </div>
            </template>
          </el-upload>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="注册日期" prop="registrationDate">
      <el-date-picker style="flex: 1" v-model="modelValue.registrationDate" value-format="YYYY-MM-DD" placeholder="请选择" />
    </el-form-item>
    <el-form-item label="营业执照开始日期" prop="businessLicenseValidStartDate">
      <el-date-picker
        style="flex: 1"
        v-model="modelValue.businessLicenseValidStartDate"
        value-format="YYYY-MM-DD"
        placeholder="请选择"
      />
    </el-form-item>
    <el-form-item label="营业执照结束日期" prop="businessLicenseValidEndDate">
      <EndTime v-model="modelValue.businessLicenseValidEndDate" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch } from "vue";
import IdCardUpload from "./IdCardUpload.vue";
import { identityCard, mobile, code, required, creditCode, length } from "../../../rules";
import upload, { isLegitimate } from "@/utils/uploadFile";
import EndTime from "./EndTime.vue";
import { ElMessage } from "element-plus";
import { compressorImage } from "@/utils/compressorFn";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(["update:modelValue", "getMemberInfo", "sendCode"]);
/**
 * 校验图片格式以及大小
 */
const validateImage = option => {
  const type = ["image/jpg", "image/jpeg", "image/png"];
  const legitimate = isLegitimate(option, type, 500);
  if (legitimate.msg) {
    ElMessage.error(legitimate.msg);
    return false;
  } else {
    return true;
  }
};
/**
 * 身份证正反面校验
 */
const verifyIdentityCardImage = (rules, value, callback) => {
  const condition = props.modelValue.idCardBackImage && props.modelValue.idCardFrontImage;
  if (condition) {
    return callback();
  } else if (!props.modelValue.idCardFrontImage) {
    return callback("请上传身份证正面");
  } else if (!props.modelValue.idCardBackImage) {
    return callback("请上传身份证反面");
  } else {
    return callback("请上传身份证正反面");
  }
};
/**
 * 注册企业信息表单校验规则
 */
const rules = {
  businessName: [required("请输入完整的企业名称"), length(2, 50, "企业名称")],
  operatorName: [required("请输入经营者名称"), length(2, 50, "经营者名称")],
  unifiedSocialCreditCode: creditCode,
  mobileNumber: [mobile, required("请输入手机号")],
  verificationCode: [code(4), required("请输入验证码")],
  businessLicenseImage: required("请上传营业执照"),
  idCardValidStartDate: required("请选择身份证有效期开始时间"),
  idCardValidEndDate: required("请选择身份证有效期结束时间"),
  businessLicenseValidStartDate: required("请选择营业执照有效期开始时间"),
  businessLicenseValidEndDate: required("请选择营业执照有效期结束时间"),
  businessScope: [required("请输入经营范围"), length(1, 32, "经营范围")],
  enterpriseShortName: [required("请输入简称"), length(1, 32, "简称")],
  registeredCapital: [
    required("请输入注册资本"),
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: "请输入正确的注册资本", trigger: "blur" }
  ],
  idCardFrontImage: [required("请上传身份证"), { validator: verifyIdentityCardImage, trigger: "change" }],
  enterpriseEmail: [required("请输入邮箱"), { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
  enterpriseAddress: [required("请输入企业地址"), length(1, 100, "企业地址")],
  businessShortName: [required("请输入企业简称"), length(1, 32, "企业简称")],
  idNumber: identityCard,
  registrationDate: required("请选择注册日期")
};
watch(
  () => props.modelValue.idCardFrontImage,
  () => {
    formRef.value.validateField(["idCardFrontImage"], () => {});
  }
);
watch(
  () => props.modelValue.idCardBackImage,
  () => {
    formRef.value.validateField(["idCardFrontImage"], () => {});
  }
);
/**
 * 营业执照上传
 */
const uploadLicense = async option => {
  compressorImage(option, async () => {
    if (validateImage(option)) {
      const fileInfo = await upload(option);
      props.modelValue.businessLicenseImage = fileInfo.url;
    }
  });
};
const formRef = ref();
const validate = () => {
  return new Promise(resolve => {
    formRef.value.validate(valid => {
      resolve(valid);
    });
  });
};
const resetFields = () => {
  return formRef.value.resetFields();
};
defineExpose({
  validate,
  resetFields
});
</script>

<style lang="scss" scoped>
.upload-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  flex: 1;

  > div {
    width: 100%;
    text-align: center;
    color: #3d3d3d;
  }

  .upload-ele {
    background: #f2f3f5;
    height: 144px;
    margin-bottom: 10px;
    padding-top: 40px;
    box-sizing: border-box;
  }

  .upload-img-preview {
    height: 144px;

    img {
      height: 100%;
      width: 100%;
    }
  }

  ::v-deep(.el-upload) {
    display: block;
    color: #c9cdd4;
    text-align: center;

    .el-icon {
      display: block;
      margin: 0 auto 10px;
      font-size: 30px;
    }
  }
}
</style>
